<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/web/res/css/xadmin.css">
    <script type="text/javascript" src="/web/res/js/jquery.min.js"></script>
    <script type="text/javascript" src="/web/res/layer/layer.js" charset="utf-8"></script>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html,body{
        width:100%;height:100%;
		overflow:hidden;
        background-size: 100% 100%;
        background-image: url('/web/res/images/login/bg1.jpg');
        background-repeat: no-repeat;
    }
    .kuang{
        padding: 50px 100px;
        /* position: absolute; */
        width: 500px;
        height: 500;
        background-color: #ffffff;
        margin: auto;
        margin-top: 200px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -o-border-radius:5px;
        border-radius: 5px;
        position:relative;
        left:100px;
    }
    .title{
        font-size: 30px;
        columns: #333333;
        text-align: center;
    }
    .userinfo{
        margin-top: 20px;
        border: 1px solid #DDDDDD;
        border-radius: 4px;
        padding: 5px;

    }
    .userinfo img{
        width: 18px;
        height: 18px;
        display: inline-block;
        vertical-align: middle;
    }
    .userinfo input{
        display: inline-block;
        vertical-align: middle;
        border: 0;
        outline: none;
        width: 90%;

    }
    .userinfo :-ms-input-placeholder{
        font-size: 10px;
        color: #666666;
    }
    .userinfo ::-moz-placeholder{
        font-size: 10px;
        color: #666666;
    }
    .userinfo ::-webkit-input-placeholder{
        font-size: 10px;
        color: #666666;
    }
    .userinfo  ::placeholder{
        font-size: 10px;
        color: #666666;
    }
    .user{

    }
    .userleft{
        width: 48%;
        margin-right: 2%;
        display: inline-block;
        vertical-align: middle;
    }
    .code{
        width: 48%;
        display: inline-block;
        vertical-align: middle;
        margin-top: 20px;
        /* text-align: center;
        padding: 10px;
        font-size: 10px;
        background-color: #ff43ff;
        margin-top: 20px;
        border-radius: 8px; */
    }
    .pwd{
        margin-top: 30px;
    }
    .chose{
        display: inline-block;
        vertical-align: middle;
        width:16px ;
        height: 16px;
        border: 1px solid #DDDDDD;
        margin-right: 5px;
    }
    .pass{
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        color: #333333;
    }
    .login{
        width: 100%;
        padding: 10px;
        background-color: #4376F1;
        border-radius: 5px;
        text-align: center;
        color: #ffffff;
        margin-top: 20px;
    }
</style>

<body class="content"  onkeydown="keyLogin()">
    <div class="kuang">
        <div class="title">欢迎使用后台管理系统</div>
        <form method="post" action="/web/login.html" class="layui-form" id="userLogin" method="post">
            <div class="userinfo">
                <img src="/web/res/images/login/person.png" alt="">
                <input type="text" name="username" id="username" placeholder="请输入用户名" lay-verify="required" class="layui-input">
            </div>
            <div class="userinfo">
                <img src="/web/res/images/login/password.png" alt="">
                <input type="password" name="password" id="password" placeholder="请输入密码" lay-verify="required" class="layui-input">
            </div>

            <div class="user">
                <div class="userinfo userleft">
                    <img  src="/web/res/images/login/code.png" alt="" >
                    <input type="text" name="vercode" id="vercode" placeholder="请输入验证码" lay-verify="required" class="layui-input" style="width: 80% !important;">
                </div>
                <!-- <div class="code">验证码</div> -->
                <img class="code" src="/web/kaptcha" onclick="this.src=this.src;" id="vercode_src" style="height: 45px;">
            </div>

            <div class="login" onclick="loginsubmit();" id="btn_submit">登录</div>
        </form>
    </div>

    <script type="text/javascript">
        <!-- 登录失败消息提示 -->
        <#if msg?default("")?trim?length gt 1>
            layer.msg('${msg!''}', {time: 3000, icon:5,offset: '30px'});
        </#if>

        function loginsubmit(){
            var userLogin = $("#userLogin");
            var username = $("#username").val();
            var password = $("#password").val();
            var vercode = $("#vercode").val();
            //判断表单数据是否为空!
            if(username.length<=0){
                layer.msg('用户名不能为空!', {time: 3000, icon:5,offset: '30px'});
                return ;
            }else if(password.length<=0){
                layer.msg('密码不能为空!', {time: 3000, icon:5,offset: '30px'});
                return ;
            }else if(vercode.length<=0){
                layer.msg('验证码不能为空!', {time: 3000, icon:5,offset: '30px'});
                return ;
            }else{
                userLogin.submit();
            }
        }

        document.onkeydown = function(){
            //解决火狐回车事件没作用
            var charCode=(navigator.appName=="Netscape")?event.which:event.keyCode;
            if(charCode==13){
                document.getElementById("btn_submit").click();
                return false;
            }
        };

        window.onload = function(){
            document.getElementById("loginname").focus();
        };

    </script>

</body>
</html>
